import { insertCssLink } from "../../util/insert-style.js"
import { order_tage } from "../../util/order-control.js";


async function createSkeletonComponent(body, contentFunction, getData) {

    const { logoSrc, logoAlt, logoText, navItems, userName, avatarPath, avatarAlt, active } = getData

    // const logoSrc = getData.logoSrc || 'public/imgs/logo.jpg'; // 默认logo路径
    // const logoAlt = getData.logoAlt || '默认logo'; // 默认alt属性
    // const logoText = getData.logoText || '学生餐馆'; // 默认logo文字
    // const navItems = getData.navItems || navItems; // 使用传入的 navItems
    // const userName = getData.userName || '用户名'; // 默认用户名
    // const avatarPath = getData.avatarPath || 'public/imgs/avatar.jpg'; // 默认头像路径
    // const avatarAlt = getData.avatarAlt || '用户头像'; // 默认头像alt属性
    // const active = getData.active || 0; // 使用传入的 active
    const skeletonHtml = /*HTML*/`
        <div class="skeleton-header  d-flex justify-content-between align-items-center">
            <div class="header-logo">
                <img src="${logoSrc}" alt="${logoAlt}" class="logo-img" />
                <span class="logo-text">${logoText}</span>
            </div>
            <div class="header-nav">
                <nav>
                    <ul class="nav">
                        ${navItems.map((item, i) => {
        if (i == active) {
            return `<li class="nav-item"><a class="nav-link active-nav" href="#">${item}</a></li>`
        }else  {
            if(order_tage()>0 && item=='我的订单'){
                return /*HTML*/`<li class="nav-item nav-order position-relative">
                <span id="order-badge" class="position-absolute translate-middle badge rounded-pill bg-danger">${order_tage()}</span>
                <a class="nav-link" href="#">
               ${item}
                </a></li>`
            }
            if(item=='我的订单'){
                return `<li class="nav-item nav-order position-relative"><a class="nav-link" href="#">${item}</a></li>`
            }
            return `<li class="nav-item position-relative"><a class="nav-link" href="#">${item}</a></li>`
        } 
    }).join('')}
                    </ul>
                </nav>
            </div>
            <div class="header-user d-flex align-items-center">
                <span class="userName">${userName}</span>
                <img src="${avatarPath}" alt="${avatarAlt}" class="avatar-img" />
            </div>
        </div>
        <div class="skeleton-content">
        </div>
    `;

    // 将骨架 HTML 插入到 body 中
    $(body).html(skeletonHtml);

    // 调用内容函数并将返回的组件插入到骨架中
    // const contentHtml = ();
    // console.log(contentHtml);

    $('.skeleton-content').html(contentFunction);
    insertCssLink("stokelen")
}

export {
    createSkeletonComponent
}